import React, { useState, useRef, useEffect } from 'react';
import { Modal, Card, Tabs } from 'antd';
import { categoryType_status } from '@/common/contact'
import MateriaTabel from './components/MateriaTabel'


const SelelctModel = (props) => {
  const { visible = {}, onClose, onOk, title = '选择资料', getCheckboxProps } = props;
  const { show = false, details = [], sy } = visible;
  const tabList = (() => {
    return Object.keys(categoryType_status).map((item) => {
      return {
        label: categoryType_status[item],
        key: item,
        children: null
      };
    });
  })();
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [activeTabKey, setActiveTabKey] = useState(tabList[0].key);

  const modalProps = {
    title: title,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    zIndex: 1001,
    okText: '确认',

  };
  useEffect(() => {
    if (visible) {
      setSelectedRowKeys(details)
    }
    else {
      setSelectedRowKeys([])
    }
  }, [visible])
  const onChange = (e) => {
    setSelectedRowKeys(e)
  }
  return (
    <Modal
      {...modalProps}
      onCancel={onClose}
      onOk={() => {
        onOk && onOk(selectedRowKeys, sy);
        onClose();
      }}
    >
      <>
        <Tabs
          items={tabList}
          activeKey={activeTabKey}
          onChange={(key) => {
            setActiveTabKey(key);
          }}
        >

        </Tabs>
        <MateriaTabel getCheckboxProps={getCheckboxProps} selectedRowKeys={selectedRowKeys} setSelectedRowKeys={setSelectedRowKeys} activeTabKey={activeTabKey}></MateriaTabel>
      </>
    </Modal>
  )
}
export default SelelctModel;
